<template>
	<view class="base-popup">
		<nut-popup
			ref="popupRef"
			:close-on-click-overlay="props.closeOnClickOverlay"
			:position="props.mode"
			:closeable="props.closeable"
			:overlay="props.overlay"
			:round="props.round"
			@change="handleChange"
      v-model:visible="popupVisible"
      :style="props.style"
		>
			<view class="base-popup__content">
				<slot />
			</view>
		</nut-popup>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const emits = defineEmits(['open', 'close']);
const props = defineProps({
	mode: { type: String, default: 'center' },
	closeable: { type: Boolean, default: true },
	overlay: { type: Boolean, default: true },
	closeOnClickOverlay: { type: Boolean, default: false },
	round: { type: Boolean, default: true },
  style: { type: [Object, String], default: () => ({ width: '100vw' }) }
});

const popupVisible = ref(false);
const popupRef = ref(null);

const open = () => {
	// popupRef.value.open();
	popupVisible.value = true;
};

const close = () => {
	// popupRef.value.close();
	popupVisible.value = false;
	emits('close');
};

const handleChange = (e) => {
	const { show } = e;
	if (show === false) {
		emits('close');
	}
};

defineExpose({ open, close });
</script>

<style lang="scss">
.base-popup {
	width: 100%;

	&__content {
		width: 100%;
	}
}
</style>
